<template>
  <h2>这是第四个自定义组件：1、触发点击事件，向父组件传值；2、接收父组件值</h2>
  <a href="https://blog.csdn.net/qq_40816649/article/details/116527306">参考地址</a>
  <div class="components_test">
    <div @click="handleClick">显示父组件传过来的值：<b>{{ name }}</b></div>
    <div @click="onClick(45645645645)">点击向父组件传值</div>
    <div @click="onClick(age)">点击向父组件传值，传递之前修改一下</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, toRefs, toRef } from "vue";
export default defineComponent({
  data:()=>{
    return {
      age:123
    }
  },
  props: {
    name: {
      type: String,
      default: "我的",
    },
    onClick: {
      type: Function,
      default: () => {},
    },
    onClick2: {
      type: Function,
      default: () => {this.age+=100;},
    },
  },
  emits: ["handleClick"],
  setup(props, context) {
    // 其中props是响应式不能随便使用es6解构，context不是响应式可以使用es6解构
    let { name } = toRefs(props); // 将props转化为响应式，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
    let handleClick = () => {
      console.log('子组件：',props, context);
      context.emit("handleClick", 324343);
    };
    return {
      handleClick,
      name,
    };
  },
});
</script>
<style lang="scss" scoped></style>